import React, { Component } from 'react'
import { StatusBar, Modal, TouchableOpacity, BackHandler, Platform, ActivityIndicator, Picker, ScrollView, View, Text} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import { Loading, Empty } from '../Components'

import ServerActions from '../Redux/ServerRedux'

import ServerList from '../Components/ServerList'
// Styles
import styles from './Styles/ServerScreenStyle'

const typeList = [
  {value:0,name:'全部'},
  {value:1,name:'中医师'},
  {value:2,name:'健康师'},
  {value:3,name:'美容师'},
  {value:4,name:'养生师'},
]

const sortList = [
  {value:'distance',name:'距离排序'},
  {value:'rate',name:'评分排序'},
  {value:'all',name:'综合排序'},
]

class ServerScreen extends Component {
  static navigationOptions = {
    title: '附近师傅',
    //headerStyle: {elevation:0},
    tabBarLabel: '师傅',
    tabBarIcon: ({tintColor}) => <Icon name='briefcase' color={tintColor} size={22} />
  }
  constructor(props) {
    super(props)
    this.state = {
      filterType:0,
      preFilterType: 0,
      filterSort:'distance',
      preFilterSort: 'distance',
      modalTypeVisible: false,
      modalSortVisible: false,
    }
  }
  getServer() {
    const city = this.props.city ? this.props.city : {}
    return this.props.getServer(
      this.props.token,
      city.city,
      city.longitude,
      city.latitude,
      this.state.filterType,
      this.state.filterSort
    )
  }
  componentWillMount() {
    this._navListener = this.props.navigation.addListener('didFocus', ()=>{
      StatusBar.setTranslucent(false)
      StatusBar.setBarStyle('dark-content')
      StatusBar.setBackgroundColor('white')
    })
    if (this.props.city) {
      this.getServer()
    }
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevState.filterType !== this.state.filterType
      || prevState.filterSort !== this.state.filterSort) {
      if (this.props.city) {
        this.getServer()
      }
    }
  }
  componentWillUnmount() {
    this._navListener.remove()
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  render () {
    let mainView = null
    if (this.props.server.fetching) {
      mainView = <Loading />
    } else if (this.props.server.payload == '') {
      mainView = <Empty title='附近没有技师' />
    } else {
      mainView = <ServerList
        data={this.props.server.payload}
        navigation={this.props.navigation} />
    }
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && (
          <View>
          <View style={styles.filter}>
            <TouchableOpacity
              onPress={()=>this.setState({modalTypeVisible:true,preFilterType:this.state.filterType})}
              style={{padding:15,alignItems:'center',width:'50%'}}>
              <Text><Text>{typeList.map((item)=>{if(this.state.filterType==item.value){return item.name}})}</Text>  <Icon name='angle-down' /></Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={()=>this.setState({modalSortVisible:true,preFilterSort:this.state.filterSort})}
              style={{padding:15,alignItems:'center',width:'50%'}}>
              <Text><Text>{sortList.map((item)=>{if(this.state.filterSort==item.value){return item.name}})}</Text>  <Icon name='angle-down' /></Text>
            </TouchableOpacity>
          </View>
          <Modal transparent onRequestClose={()=>null}
            visible={this.state.modalTypeVisible}>
          <TouchableOpacity onPress={()=>this.setState({modalTypeVisible:false})} style={{flex:1,backgroundColor:'rgba(0,0,0,0.4)'}}></TouchableOpacity>
          <View style={{backgroundColor:'white',alignItems:'center'}}>
            <View style={{flex:1,width:'100%',padding:15,flexDirection:'row',justifyContent:'space-between'}}>
              <TouchableOpacity onPress={()=>this.setState({modalTypeVisible:false})}><Text>取消</Text></TouchableOpacity>
              <TouchableOpacity onPress={()=>{this.setState({modalTypeVisible:false,filterType:this.state.preFilterType})}}><Text>确定</Text></TouchableOpacity>
            </View>
            <Picker
              selectedValue={this.state.preFilterType}
              onValueChange={(value,index)=>this.setState({preFilterType:value})}
              style={{width:'50%'}}>
              {typeList.map((item,index) =>
                <Picker.Item key={index} label={item.name} value={item.value} />)}
            </Picker>
          </View>
          </Modal>
          <Modal transparent onRequestClose={()=>null}
            visible={this.state.modalSortVisible}>
          <TouchableOpacity onPress={()=>this.setState({modalSortVisible:false})} style={{flex:1,backgroundColor:'rgba(0,0,0,0.4)'}}></TouchableOpacity>
          <View style={{backgroundColor:'white',alignItems:'center'}}>
            <View style={{flex:1,width:'100%',padding:15,flexDirection:'row',justifyContent:'space-between'}}>
              <TouchableOpacity onPress={()=>this.setState({modalSortVisible:false})}><Text>取消</Text></TouchableOpacity>
              <TouchableOpacity onPress={()=>{this.setState({modalSortVisible:false,filterSort:this.state.preFilterSort})}}><Text>确定</Text></TouchableOpacity>
            </View>
            <Picker
              selectedValue={this.state.preFilterSort}
              onValueChange={(value,index)=>this.setState({preFilterSort:value})}
              style={{width:'50%'}}>
              {sortList.map((item,index) =>
                <Picker.Item key={index} label={item.name} value={item.value} />)}
            </Picker>
          </View>
          </Modal>
          </View>
        )}
        {Platform.OS === 'android' &&
        <View style={styles.filter}>
          <Picker
            selectedValue={this.state.filterType}
            onValueChange={(value,index)=>this.setState({filterType:value})}
            mode='dropdown'
            style={{width:'50%'}}>
            <Picker.Item label='师傅类别' value='0' />
            <Picker.Item label='中医师' value='1' />
            <Picker.Item label='健康师' value='2' />
            <Picker.Item label='美容师' value='3' />
            <Picker.Item label='养生师' value='4' />
          </Picker>
          <Picker
            selectedValue={this.state.filterSort}
            onValueChange={(value,index)=>this.setState({filterSort:value})}
            mode='dropdown' style={{width:'50%'}}>
            <Picker.Item label='距离排序' value='distance' />
            <Picker.Item label='评分排序' value='rate'  />
            <Picker.Item label='综合排序' value='all'  />
          </Picker>
        </View>
        }
        {mainView}
        {this.props.city &&
        <View style={styles.address}>
          <Text style={{color:'rgba(255,255,255,0.85)'}}>
            {this.props.city.address}</Text>
        </View>}
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
    city: state.city.payload,
    server: state.server
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getServer: (token,city,longitude,latitude,filterType,filterSort) => dispatch(ServerActions.serverRequest(token,city,longitude,latitude,filterType,filterSort))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ServerScreen)
